<template>
    <div id="header">
        <div class="title">地铁三维可视化管控平台</div>
        <div class="leftTool">
            <i class='iconfont metro-dingwei icon' style="color:#eb9a02;"></i>
            <span>{{ localCity }}</span>
            <span>{{ currentDate }}</span>
            <span>{{ currentWeekday }}</span>
            <span>{{ currentTime }}</span>
        </div>
        <div class="rightTool">
            <i :class="['iconfont',weatherIcon,'icon']"></i>
            <span>{{ currentWeather}} {{currentTemperature}}°C</span>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue";
import dayjs from "dayjs";
import { FetchWeatherInfoByIp } from "@/api/weather";
const weekMap = {
    Sunday: "星期日",
    Monday: "星期一",
    Tuesday: "星期二",
    Wednesday: "星期三",
    Thursday: "星期四",
    Friday: "星期五",
    Saturday: "星期六",
};
const localCity = ref("武汉");
const currentDate = ref(dayjs(new Date()).format("YYYY/MM/DD"));
const currentTime = ref(dayjs(new Date()).format("HH:mm:ss"));
const currentWeekday = ref(weekMap[dayjs(new Date()).format("dddd")]);
const currentTemperature = ref("27°C");
const currentWeather = ref("晴");

//时钟每秒更新
let timer = setInterval(() => { 
    currentDate.value = dayjs(new Date()).format("YYYY/MM/DD");
    currentTime.value = dayjs(new Date()).format("HH:mm:ss");
    currentWeekday.value = weekMap[dayjs(new Date()).format("dddd")];
}, 1000);

onMounted(() => {
    FetchWeatherInfoByIp("武汉").then((res) => {
        const info = res.lives[0];
        localCity.value = info?.city || "武汉";
        currentTemperature.value = info?.temperature || "27°C";
        currentWeather.value = info?.weather || "晴";
    });
});

onBeforeUnmount(() => {
    clearInterval(timer);
});
</script>

<style scoped lang="scss">
#header {
    width: 100%;
    height: 57px;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../assets/uiResources/header.png");
    background-size: cover;
    display: flex;
    justify-content: center;
}

.title {
    font-family: "等线Bold";
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 2px;
    background: rgb(255, 255, 255);
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 9%,
        rgba(211, 156, 50, 1) 57%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 3px;
}

.leftTool {
    width: 26%;
    height: 70%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    padding-left: 20px;
    font-size: 15px;
}

.rightTool {
    width: 26%;
    height: 70%;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    color: #fff;
    margin-right: 20px;
}

.icon {
    font-family: "等线Bold";
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    background: rgb(255, 255, 255);
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 9%,
        rgba(211, 156, 50, 1) 57%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 10px;
}
</style>
